<template>
  <div class="detail-page">
    <!-- 导航 -->
    <van-nav-bar left-arrow @click-left="$router.back()">
      <template #title>
        <p class="detail_title">{{ list.community }}</p>
      </template>
    </van-nav-bar>

    <!-- 轮播图 -->
    <div>
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(item, index) in list.houseImg" :key="index">
          <img
            v-lazy="'http://liufusong.top:8080' + item"
            width="100%"
            height="210px"
          />
        </van-swipe-item>
      </van-swipe>
    </div>

    <!-- 内容 -->
    <div class="detail_content">
      <p>{{ list.title }}</p>
      <van-tag
        plain
        type="primary"
        v-for="item in list.tags"
        :key="item.houseCode"
        >{{ item }}</van-tag
      >

      <!-- 租金，房型，面积 -->
      <div class="detail_area">
        <div class="left">
          <p>{{ list.price }}/月</p>
          <span>租金</span>
        </div>
        <div class="center">
          <p>{{ list.roomType }}</p>
          <span>房型</span>
        </div>
        <div class="right">
          <p>{{ list.size }}平米</p>
          <span>面积</span>
        </div>
      </div>

      <!-- 装修楼层 -->
      <van-row class="more">
        <van-col span="12">装修：<span>精装</span></van-col>
        <van-col span="12" v-for="item in list.oriented" :key="item.houseCode"
          >朝向：<span>{{ item }}</span></van-col
        >
      </van-row>

      <van-row class="more">
        <van-col span="12"
          >楼层：<span>{{ list.floor }}</span></van-col
        >
        <van-col span="12">类型：<span>普通住宅</span></van-col>
      </van-row>

      <!-- 小区 -->
      <div class="soft"><span>小区：</span>{{ list.community }}</div>
    </div>

    <!-- 地图 -->
    <div><img src="http://liufusong.top:8080/img/swiper/1.png" alt="" /></div>

    <div class="detail_content">
      <!-- 房屋配套 -->
      <div class="detail_home">
        <h4>房屋配置</h4>
      </div>
      <van-grid :column-num="6" :border="false">
        <van-grid-item
          v-for="(item, index) in list.supporting"
          :key="index"
          icon="gift-o"
          :text="item"
        />
      </van-grid>

      <!-- 房源概况 -->
      <div class="detail_home">
        <h4>房源概况</h4>
      </div>

      <!-- 房屋信息页面 -->
      <van-grid direction="horizontal" :column-num="2">
        <van-grid-item icon="photo-o" text="文字" />
        <van-button plain type="primary">发消息</van-button>
      </van-grid>
      <div class="HouseDetail">{{ list.description }}</div>

      <!-- 猜你喜欢 -->
      <div class="detail_home">
        <h4>猜你喜欢</h4>
      </div>

      <!-- 详情底部 -->
      <div class="detail_bottom">
        <span>
          <van-button type="default">
            <div>
              <van-icon
                name="star-o"
                @click="toggleCollect(list.houseCode)"
                :class="{ active: collectFlag }"
              />
              收藏
            </div>
          </van-button>
        </span>
        <van-button type="default">在线咨询</van-button>
        <van-button type="info">电话预约</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import { getHouseMes } from '@/api/house'
import { addCollect, delCollect, updateCollect } from '@/api/user'
export default {
  name: 'detail-page',
  data () {
    return {
      list: '',
      res: '',
      collectFlag: false
    }
  },
  methods: {
    async toggleCollect (id) {
      if (this.collectFlag) {
        this.collectFlag = !this.collectFlag
        this.$toast.fail('取消收藏')
        const data = await delCollect(id)
        console.log(data)
      } else {
        // this.collectFlag = !this.collectFlag
        await addCollect(id)
        this.$toast.success('收藏成功')
      }
    }
  },
  async created () {
    const id = this.$route.query.id
    const data = await getHouseMes(id)
    console.log(data.body)
    this.list = data.body

    const res = await updateCollect(id)
    // console.log(res)
    this.collectFlag = res.body.isFavorite
  }
}
</script>

<style lang="less" scoped>
.detail-page {
  margin-bottom: 50px;
}
.detail_content {
  padding: 0 12px;
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
// .van-icon {
.active {
  background: #fec635;
  color: #fff;
}
// }

/deep/.van-nav-bar__title {
  color: #fff;
}

// 装修楼层
.more {
  font-size: 13px;
  margin-top: 5px;
  padding-bottom: 10px;
  margin-left: 8px;
  color: #999;
}
.more span {
  color: #000;
}

//  租金，房型，面积
.detail_area {
  display: flex;
  border-top: 1px solid #cecece;
  border-bottom: 1px solid #cecece;
  padding-bottom: 13px;
  margin: 15px 0;
  height: 85px;
  .left {
    margin: 0 30px;
    p {
      color: #fa5741;
      font-size: 16px;
      font-weight: bolder;
    }
    span {
      height: 26px;
      line-height: 26px;
      color: #999;
      padding-left: 18px;
    }
  }
  .center {
    margin: 0 30px;
    p {
      color: #fa5741;
      font-size: 16px;
      font-weight: bolder;
    }
    span {
      height: 26px;
      line-height: 26px;
      color: #999;
      padding-left: 5px;
    }
  }
  .right {
    margin: 0 30px;
    p {
      color: #fa5741;
      font-size: 16px;
      font-weight: bolder;
    }
    span {
      height: 26px;
      line-height: 26px;
      color: #999;
      padding-left: 18px;
    }
  }
}

// 小区
.soft {
  font-size: 14px;
  color: #333;
  margin: 5px;
  line-height: 44px;
  color: #666;
}

// 房屋配置
.detail_home {
  margin-bottom: 10px;
  background: #fff;
  border-bottom: 1px solid #cecece;
}

// 房屋信息
.HouseDetail {
  line-height: 1.6;
  padding: 10px 0;
  color: #333;
}
.van-button--plain.van-button--primary {
  position: absolute;
  right: 15px;
  top: 20px;
  color: #33be85;
  border: 1px solid #33be85;
  border-radius: 3px;
  height: 40px;
  line-height: 40px;
  width: 100px;
}
//底部样式
.detail_bottom {
  position: fixed;
  bottom: 0;
  left: 0;
}
.van-button {
  width: 125px;
  height: 50px;
  font-size: 17px;
}
</style>
